<template>
  <div class="card" style="width: 41.8%; margin-left: 16.6%;float: left">
    <div>
      <h3>我的回答</h3>
      <div v-if="state===200" class="answers" style="width: 100%">
        <div class="one_answer" v-for="answer in this.answerList" :key="answer.answer_id">
          <AnswerCard :answer="answer"></AnswerCard>
        </div>
      </div>
      <div v-else class="context">
        <div class="answer_content">
          <p>你还没有回答任何回答</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment";
import AnswerCard from "@/components/AnswerCard";
import {ref} from "vue";
import {getUser, getUserAns} from "@/network/user";
import {isEmpty} from "element-plus/es/utils/util";


export default {
  name: "UserAnswer",
  components: {Comment, AnswerCard},
  data() {
    return{
      user: "",
      answerList: ref([]),
      state: 400
    }
  },
  created() {
    this.get_user();
    this.get_answer();
  },
  methods: {
    get_user() {
      this.userId = this.$route.params["user_id"]
      getUser(this.userId).then((res)=>{
        this.user = res.data
      })
    },
    get_answer() {
      this.userId = this.$route.params["user_id"]
      getUserAns(this.userId).then((res)=>{
        this.answerList = res.data
        if (!isEmpty(res.data))
          this.state = 200
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/scss/common";
$main-radius: 10px;
@mixin simple-shadow {
  box-shadow: 0 1px 5px rgba(27,31,35, .15), 0 0 1px rgba(106,106,106, .15);
}

.card{
  @include simple-shadow();
}
h1 {
  margin: 0;
}

.question {
  @include simple-shadow();
  .container {
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
    padding: 15px 0;
    .question_detail {
      margin: 10px 0;
    }
  }
}

.answers {
  width: 80%;
  max-width: 700px;
  margin: 15px auto;
  //padding: 15px;
  .one_answer {
    @include simple-shadow();
    border-radius: $main-radius;
    margin-bottom: 15px;
    //&:last-child {
    //  border-bottom: none;
    //}
  }
}

h3 {
  padding-left: 20px;
}

.context {
  padding-bottom: 20px;
  .answer_content {
    margin: 0 15px;
    background-color: #f1f3f4;
    padding: 15px;
    border-radius: $main-radius;
    p {
      // 首行缩进
      //text-indent: 2em;
      line-height: $text-line-height;
      text-align: center;
      // 文章字体颜色
      color: #404040;
    }
  }

}

</style>
